<template>
  <div>
    <div class="popup_integral">
      <div class="coupon_img">
        <img src="../../../../assets/img/coupon/1元代金券H5.png" alt="">
        <div class="coupon_img_info">
          <div>1元代金券</div>
          <div class="coupon_amount">¥200积分</div>
        </div>
      </div>
      <div class="coupon_content">
        <div class="title">商品说明</div>
        <div class="title_tr">
          <span>面额：</span>
          <span>满1元减1元</span>
        </div>
        <div class="title_tr">
          <span>优惠券有效期：</span>
          <span>07-27 00:00至08-02 23:59</span>
        </div>
        <div class="title_tr">
          <span>兑换次数：</span>
          <span>限兑1次</span>
        </div>
        <div class="title_tr">
          <span>适用游戏：</span>
          <span style="color: #e93323">全场游戏通用（<span style="text-decoration: underline;color: #e93323">限制游戏除外</span>）</span>
        </div>
        <div class="title_tr">
          <span>库存：</span>
          <span>0</span>
        </div>
        <div>※确认兑换不予退还</div>
      </div>
      <div>
        <van-button round color="#c1c1c1" @click="closeIntegral">我再看看</van-button>
        <van-button round color="#ec614d">确认兑换</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    closeIntegral() {
      this.$emit('close-integral')
    }
  },
}
</script>

<style lang="less" scoped>
.popup_integral {
  width: 10rem;
  height: 11.066667rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: .666667rem .533333rem 0;
}

.coupon_img {
  font-size: .4rem;
  color: #333;
  display: flex;
  img {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: .293333rem;
  }
  .coupon_amount {
    color: #ff5543;
    padding-top: .4rem;
  }
}

.coupon_content {
  font-size: .32rem;
  color: #a1a1a1;
  .title {
    font-size: .373333rem;
    font-weight: 500;
    color: #232323;
    padding: 1.04rem 0 .466667rem;
  }
  .title_tr {
    padding-bottom: .373333rem;
    span:first-child {
      color: #333333;     
    }
  }
}

.van-button {
  font-size: .373333rem;
  width: 3.266667rem;
  height: .933333rem;
  border: 0;
  margin: .666667rem .6rem 0;
}
</style>